@extends('admin.huawei')
@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                用户管理
                <small>列表</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 后台</a></li>
                <li><a href="#">用户管理</a></li>
                <li class="active">列表</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">快速查看用户列表</h3>
                        </div><!-- /.box-header --> 
                        @if(session('info'))
                                <div  class="alert alert-success alert-dismissable">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    <h4>    <i class="icon fa fa-check"></i> 提示!</h4>
                                    {{ session('info') }}
                                </div>
                        @endif
                    <form action="{{ url('/admin/user/index') }}" method='get'>
                        <div class="col-md-2">
                            <div class="form-group" style='width:200px;float:left;margin-bottom:15px'>
                                <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true" name='num'>
                                    <option value='10' style='width:200px'
                                        @if(!empty($request['num']) && $request['num'] == 10)
                                            selected="selected"
                                        @endif
                                    >显示10条</option>
                                    <option value='20' style='width:200px'
                                        @if(!empty($request['num']) && $request['num'] == 20)
                                            selected="selected"
                                        @endif
                                        >显示20条</option>
                                    <option value='30' style='width:200px'
                                        @if(!empty($request['num']) && $request['num'] == 30)
                                            selected="selected"
                                        @endif
                                    >显示30条</option>
                                    <option value='40' style='width:200px'
                                        @if(!empty($request['num']) && $request['num'] == 40)
                                            selected="selected"
                                        @endif
                                    >显示40条</option>
                                    <option value='50' style='width:200px'
                                        @if(!empty($request['num']) && $request['num'] == 50)
                                            selected="selected"
                                        @endif
                                    >显示50条</option>
                                    <option value='100' style='width:200px'
                                        @if(!empty($request['num']) && $request['num'] == 100)
                                            selected="selected"
                                        @endif
                                    >显示100条</option>
                                    <option value='200' style='width:200px'
                                        @if(!empty($request['num']) && $request['num'] == 200)
                                            selected="selected"
                                        @endif
                                    >显示200条</option>
                                </select>
                            </div><!-- /.form-group -->
                        </div>

                        <div class="input-group input-group-sm" style='width:200px;float:left;margin-left:150px;margin-bottom:15px'>
                                <input type="text" class="form-control input-lg" style="height:34px;" name='keyword' value="{{ $request['keyword'] or '' }}"
                                >
                                <span class="input-group-btn">
                                    <button class="btn btn-info btn-flat"  style="height:34px">搜索</button>
                                </span>
                        </div>
                    </form>
                        <div class="box-body">
                            <script>
                                window.onload = function()
                                {
                                    $("#showhidden").hide(3000);
                                }
                            </script>
                            <style>
                                th{
                                    text-align:center;
                                }
                                td{
                                    text-align:center;
                                }
                            </style>
                            <table id="example2" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>邮箱</th>
                                    <th>手机号</th>
                                    <th>剩余金额</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id='ajaxtb'>
                                @foreach($data as $user)
                                <tr class='jtr'>
                                    <td class='id'>{{ $user -> id }}</td>
                                    <td class='name'>{{ $user -> name }}</td>
                                    <td class='email'>{{ $user -> email }}</td>
                                    <td class='phone'>{{ $user -> phone }}</td>
                                    <td class='bal' style='color:red'>{{ $user -> bal }}</td>
                                    @if($user -> status == 0)
                                        <td class='lang' style='color:blue;font-weight:900;font-size:12px;text-align:center;'>已启用</td>
                                    @else
                                        <td class='lang' style='color:red;font-weight:900;font-size:12px;text-align:center;'>已禁用</td>
                                    @endif
                                    <td>
                                    <a href="{{ url('/admin/user/edit') }}/{{ $user -> id}}/{{ $data -> currentPage() }}/{{ $request['num'] or '' }}/{{ $request['keyword'] or '' }}" class='bj'>编辑</a> <span style="color:#3C8DBC">丨 </sapn><a class='delete'>删除</a></td>

                                    <!-- <a href="{{ url('/admin/user/delete') }}/{{ $user -> id}}/{{ $data -> currentPage() }}/{{ $request['num'] or '' }}/{{ $request['keyword'] or '' }}" class='delete'>删除</a></td> -->
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                            {!! $data -> appends($request) -> render() !!}
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->
    </div>
    <script>
        window.onload = function()
        {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            /******鼠标点击状态栏更改状态******/ 
            $('.lang').on('click',function()
            {
                
                var lang = $(this);

                var id = $(this).parent().children().first().html();
                $.post('/admin/user/ajaxUpdate',{id:id},function(data){
                    if(data == '0')
                    {
                        lang.css('color','red');
                        lang.html('已禁用');
                    }else if(data = '2')
                    {
                        lang.css('color','blue');
                        lang.html('已启用');
                    }
                },'json');
            });

            /******鼠标移入状态栏更改鼠标样式******/ 
            $(".lang").mouseover(function(){
                $(this).css('cursor', 'pointer');
            });

            /******鼠标移入删除事件******/ 
            $(".delete").mouseover(function(){
                $(this).css('cursor', 'pointer');
            });
             


            /******鼠标点击删除事件******/ 
            $('.delete').on('click',function()
            {
                    /******获取input属性为type='text'并且name='keyword'的元素******/ 
                    var keyword = $("input[type='text'][name='keyword']").attr("value");
                   
                    /******获取option标签属性有selected="selected"的元素******/ 
                    var num = $("option[selected='selected']").attr("value");
                    var sz = 10;
                    if(num)
                    {
                        num = num;
                    }else{
                        num = sz;
                    }
                    // console.log(num);
                    /******获取url地址栏参数******/ 
                    var url = location.search; 
                    var thisParam = new Object();
                        // 判断是否存在请求的参数
                        if (url.indexOf("?") != -1) {
                            var str = url.substr(1);
                            // 截取所有请求的参数，以数组方式保存
                            strs = str.split("&");
                            for(var i = 0; i < strs.length; i ++) {
                                // 获取该参数名称，值。其中值以unescape()方法解码，有些参数会加密
                                thisParam[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                            }
                    }
                        // 返回改参数列表对象
                         // thisParam;
                    var page = thisParam.page;
                    // console.log(page);

                    /******获取当前元素上一级的上一级的所有元素的第一个td里面的html()内的值******/ 
                    var id = $(this).parent().parent().parent().children().first().html();
                    // console.log(id);
                    /******发送数据到delete控制器中并且带值******/ 
                    $.post('/admin/user/delete',{id:id,keyword:keyword,num:num,page:page},function(data)
                    {

                        /******获取返回用户的条数******/ 
                        var r = data.length;

                        /******获取所有的tr******/ 
                        var num = $('.jtr');

                        /******获取tr下class为id的td******/ 
                        var con = $(".jtr").children("td[class = 'id']");

                        /******获取tr下class为name的td******/ 
                        var con1 = $(".jtr").children("td[class = 'name']");

                        /******获取tr下class为email的td******/ 
                        var con2 = $(".jtr").children("td[class = 'email']");

                        /******获取tr下class为phone的td******/ 
                        var con3 = $(".jtr").children("td[class = 'phone']");

                        /******获取tr下class为bal的td******/ 
                        var con4 = $(".jtr").children("td[class = 'bal']");

                        /******获取tr下class为lang的td******/ 
                        var con4 = $(".jtr").children("td[class = 'lang']");



                        /******循环tr的中条数次数******/ 
                        for(var i = 0; i < num.length; i++)
                        {
                            

                            if(r == 0)
                            {
                                // 获取当前page的值
                                var page = thisParam.page;
                                var pageq = page - 1;
                                var sss1 = 'page=' + page;
                                var sss2 = 'page=' + pageq;
                                var str2 = window.location.href;
                                var str1=str2; 
                                var sqq = '';
                                if(str2 !="" && str2.length >=1) 
                                { 
                                    str1=str2.replace(sss1,sss2); 
                                    sqq = history.pushState('','世界这么大',str1);
                                    
                                } 
                                // 刷新
                                window.location.reload();
                            }

                            /******判断当i > r查询出的数据条数的时候给tr的html()为空******/ 
                            if(i >=  r )
                            {
                               return num.eq(i).html('');
                            }

                            /******循环tr(i)下class为id的td并重新赋上返回值******/ 
                            con.eq(i).html(data[i]['id']);

                            /******循环tr(i)下class为name的td并重新赋上返回值******/ 
                            con1.eq(i).html(data[i]['name']);

                            /******循环tr(i)下class为email的td并重新赋上返回值******/ 
                            con2.eq(i).html(data[i]['email']);

                            /******循环tr(i)下class为phone的td并重新赋上返回值******/ 
                            con3.eq(i).html(data[i]['phone']);

                            /******循环tr(i)下class为phone的td并重新赋上返回值******/ 
                            con4.eq(i).html(data[i]['bal']);

                            /******循环tr(i)下class为status的td并重新赋上返回值******/ 
                            /******判断status的数值******/ 
                            if(data[i]['status']  == 0)
                            {
                                con4.eq(i).css({
                                    'color' : 'blue',
                                    'font-weight' : '900',
                                    'font-size' : '12px',
                                    'text-align' : 'center'
                                }).html('已启用');
                            }else{
                                con4.eq(i).css({
                                    'color' : 'red',
                                    'font-weight' : '900',
                                    'font-size' : '12px',
                                    'text-align' : 'center'
                                }).html('已禁用');
                            }
                        }
                        alert(id + '------' + '删除成功');
                    },'json');
            });
                  

        }


    </script>
@endsection('content')
